import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from '../store'
import {
  BoxWrapper,
  TileWrapper,
  IntroWrapper,
  ImgMask,
  BottomText,
} from '../style'

class BookList extends Component {
  render() {
    return (
      <Fragment>
        {
          this.createList()
        }
      </Fragment>
    )
  }
  componentDidMount() {
    this.props.getBookList()
  }
  createList() {
    return this.props.bookListData.map(item => {
      return (
        <BoxWrapper key={item.get('_id')} className="update-notice">
          <TileWrapper>
            <span className="title">{item.get('name')}</span>
          </TileWrapper>
          <IntroWrapper>
            <span className="people">
              <span className="iconfont">&#xe668;</span>
              <span>&nbsp;789161<span>&nbsp;℃</span></span>
            </span>
            <span className="talk">
              <span className="iconfont">&#xe64e;</span>
              <span>&nbsp;852</span>
            </span>
          </IntroWrapper>
          <BoxWrapper className="update-img">
            <ImgMask>
              <div className="img-mask">
                <img src={item.get('img')} alt="" />
                <div className="mask-text">{item.get('introduction')}</div>
              </div>
            </ImgMask>
          </BoxWrapper>
          <BottomText>
            <div className="main">
              {item.get('introduction')}
            </div>
          </BottomText>
        </BoxWrapper>
      )
    })
  }
}

const bookState = (state) => {
  return {
    bookListData: state.getIn(['home', 'bookListData'])
  }
}

const bookDispatch = (dispatch) => {
  return {
    getBookList() { // 获取书籍列表
      const action = actionCreators.getBookList()
      dispatch(action)
    }
  }
}

export default connect(bookState, bookDispatch)(BookList)